<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>用户注册 - {{admin_setting('name')}}</title>
    
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- 配置主题颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
        }
    </style>
</head>
<body class="font-inter bg-white text-dark antialiased">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 md:px-6 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center text-white">
                    <i class="fa-solid fa-link text-xl"></i>
                </div>
                <span class="text-xl font-bold text-dark">{{admin_setting('name')}}</span>
            </div>
            
            <nav class="hidden md:flex items-center space-x-8">
                <a href="/" class="text-dark hover:text-primary transition-colors font-medium">首页</a>
                <a href="/user/login" class="text-dark hover:text-primary transition-colors font-medium">登录</a>
                <a href="/user/register" class="text-dark hover:text-primary transition-colors font-medium">注册</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <a href="/user/register" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">免费注册</a>
                
                <button id="menuBtn" class="md:hidden text-dark focus:outline-none">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <div id="mobileMenu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="/" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">首页</a>
                <a href="/user/login" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">登录</a>
                <a href="/user/register" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">注册</a>
            </div>
        </div>
    </header>

    <!-- 注册表单 -->
    <main class="pt-20 container mx-auto px-4 md:px-6">
        <div class="max-w-md mx-auto">
            <!-- 错误提示 -->
            @if(session('danger'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-600">
                <div class="flex items-center">
                    <i class="fa-solid fa-triangle-exclamation mr-2"></i>
                    <span>{{ session('danger') }}</span>
                </div>
            </div>
            @endif
            
            <!-- 成功提示 -->
            @if(session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-600">
                <div class="flex items-center justify-between">
                    <span>{{ session('success') }}</span>
                    <a href="/user/login" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all">返回登录</a>
                </div>
            </div>
            @endif

            <!-- 注册表单 -->
            <form action="{{ url()->current() }}" method="post" class="bg-white p-8 rounded-xl shadow-md">
                @csrf
                <h2 class="text-2xl font-bold mb-6 text-center">创建账户</h2>
                
                <div class="mb-6">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">邮箱地址</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-envelope text-gray-400"></i>
                        </div>
                        <input type="email" name="email" id="email" 
                               class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary shadow-sm transition-all"
                               placeholder="请输入您的邮箱"/>
                    </div>
                </div>
                
                <div class="mb-6">
                    <label for="pass" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" name="pass" id="pass" 
                               class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary shadow-sm transition-all"
                               placeholder="请输入密码" minlength="6" required/>
                    </div>
                </div>
                
                <div class="mb-6">
                    <label for="captcha" class="block text-sm font-medium text-gray-700 mb-2">邮箱验证码</label>
                    <div class="flex">
                        <input type="text" name="captcha" id="captcha" 
                               class="block w-full px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary shadow-sm transition-all"
                               placeholder="请输入验证码"/>
                        <button type="button" id="get-captcha" 
                                class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-r-lg font-medium transition-all shadow-md hover:shadow-lg whitespace-nowrap">
                            获取验证码
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 gap-4">
                    <button type="submit" id="submit" 
                            class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-4 rounded-lg font-medium shadow-md hover:shadow-lg transition-all">
                        立即注册
                    </button>
                    <a href="/user/login" class="w-full text-center border border-primary text-primary hover:bg-primary/5 py-3 px-4 rounded-lg font-medium transition-all">
                        返回登录
                    </a>
                </div>
            </form>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-16 pb-8 mt-12">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center">
                <p class="text-gray-500">&copy; {{ date('Y') }} {{admin_setting('name')}}. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- 交互脚本 -->
    <script>
        // 表单验证逻辑
        const emailInput = document.getElementById('email');
        const passInput = document.getElementById('pass');
        
        emailInput.addEventListener('change', function() {
            const rxp = new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
            if(rxp.test(emailInput.value)) {
                emailInput.classList.add('ring-1', 'ring-green-500');
                emailInput.classList.remove('ring-1', 'ring-red-500');
            } else {
                emailInput.classList.add('ring-1', 'ring-red-500');
                emailInput.classList.remove('ring-1', 'ring-green-500');
            }
        });

        passInput.addEventListener('change', function() {
            const pwl = passInput.value.length;
            if(pwl >= 6 && pwl <= 16) {
                passInput.classList.add('ring-1', 'ring-green-500');
                passInput.classList.remove('ring-1', 'ring-red-500');
            } else {
                passInput.classList.add('ring-1', 'ring-red-500');
                passInput.classList.remove('ring-1', 'ring-green-500');
            }
        });

        // 验证码获取逻辑
        document.getElementById("get-captcha").addEventListener("click", function() {
            var email = document.getElementById("email").value;
            var button = document.getElementById("get-captcha");
            
            if(!email) {
                alert("请输入邮箱地址！");
                return;
            }

            // 点击后立即禁用按钮并启动倒计时
            button.disabled = true;
            startCountdown();

            fetch("{{ url('/api/email/verify') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                },
                body: JSON.stringify({email: email})
            })
            .then(response => response.json())
            .then(response => {
                if(response.status == 1) {
                    alert("验证码已发送至您的邮箱，请查收！");
                } else {
                    alert(response.msg);
                    // 发送失败时恢复按钮状态
                    button.disabled = false;
                    clearInterval(window.countdownTimer);
                    button.textContent = "获取验证码";
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert("网络异常，请稍后重试");
                button.disabled = false;
                clearInterval(window.countdownTimer);
                button.textContent = "获取验证码";
            });
        });

        function startCountdown() {
            var countdown = 60;
            var button = document.getElementById("get-captcha");
            button.disabled = true;
            button.textContent = "重新发送(" + countdown + "秒)";
            
            window.countdownTimer = setInterval(function() {
                countdown--;
                button.textContent = "重新发送(" + countdown + "秒)";
                
                if (countdown <= 0) {
                    clearInterval(window.countdownTimer);
                    button.textContent = "获取验证码";
                    button.disabled = false;
                }
            }, 1000);
        }

        // 导航栏交互逻辑
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });
        
        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            const icon = menuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });
        
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                        const icon = menuBtn.querySelector('i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                }
            });
        });
    </script>
</body>
</html>